﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Features - Selection </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Features - Selection ">
    <meta name="generator" content="docfx 2.59.2.0">
    
    <link rel="shortcut icon" href="../../../../favicon.ico">
    <link rel="stylesheet" href="../../../../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../../../../styles/docfx.css">
    <link rel="stylesheet" href="../../../../styles/main.css">
    <link rel="stylesheet" href="../../../../styles/socialbar.css">
    <link rel="stylesheet" href="../../../../styles/header.css">
    <link rel="stylesheet" href="../../../../styles/version.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,100italic,300italic,400italic" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta property="docfx:navrel" content="../../../../toc.html">
    <meta property="docfx:tocrel" content="../../../toc.html">
    <meta property="docfx:uid" content="doc-plugins-ui-features-selection">
    
    <meta property="docfx:rel" content="../../../../">
    
    <script type="text/javascript" src="../../../../nav.js"></script>
    <script type="text/javascript" src="../../../toc.js"></script>
  
  </head>  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <div class="mb-socials-heading" style="height: 40px;">
        	<div class="mb-socials-heading-inner container">
        		<div class="mb-socials-heading-right">
        			<div class="mb-socials-list">
                          
        				<div class="mb-socials-item facebook">
        					<a class="mb-socials-item-link" target="_blank" href="https://facebook.com/embyapp"></a>
        					<div class="mb-socials-item-popup">
        						<span>Facebook</span>
        					</div>
        				</div><div class="mb-socials-item twitter">
        					<a class="mb-socials-item-link" target="_blank" href="https://twitter.com/embyapp"></a>
        					<div class="mb-socials-item-popup">
        						<span>Twitter</span>
        					</div>
        				</div>
        				<div class="mb-socials-item pinterest">
        					<a class="mb-socials-item-link" target="_blank" href="https://www.pinterest.com/emby0240/emby-news/"></a>
        					<div class="mb-socials-item-popup">
        						<span>Pinterest</span>
        					</div>
        				</div>
        				<div class="mb-socials-item tumblr">
        					<a class="mb-socials-item-link" target="_blank" href="https://embyapp.tumblr.com/"></a>
        					<div class="mb-socials-item-popup">
        						<span>Tumblr</span>
        					</div>
        				</div>
        				<div class="mb-socials-item github">
        					<a class="mb-socials-item-link" target="_blank" href="https://github.com/MediaBrowser"></a>
        					<div class="mb-socials-item-popup">
        						<span>GitHub</span>
        					</div>
        				</div><div class="mb-socials-item rss">
        					<a class="mb-socials-item-link" target="_blank" href="https://emby.media/blog.xml"></a>
        					<div class="mb-socials-item-popup">
        						<span>RSS</span>
        					</div>
        				</div>
                          
        			</div>
        		</div>
        	</div>
        </div>
        <div class="container">
        	<nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
        		  
        		  <a class="navbar-brand" href="../../../../index.html">
        		    <img id="logo" class="svg" src="../../../../images/emby_dev_logo.png" alt="">
        		  </a>
        		  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        			<span class="sr-only">Toggle navigation</span>
        			<span class="icon-bar"></span>
        			<span class="icon-bar"></span>
        			<span class="icon-bar"></span>
        		  </button>
        		<div class="collapse navbar-collapse" id="navbar">
        			
        			<ul class="nav level1 navbar-nav">
        			      <li class="nav-item">
        			          <a class="nav-link" href="../../../../index.html" title="DEV Home">DEV Home</a>
        			      </li>
        			      <li class="nav-item">
        			          <a class="nav-link" href="../../../../doc/index.html" title="Documentation">Documentation</a>
        			      </li>
        			      <li class="nav-item">
        			          <a class="nav-link" href="../../../../reference/index.html" title="Reference">Reference</a>
        			      </li>
        			      <li class="nav-item">
        			          <a class="nav-link" href="../../../../download/index.html" title="Download">Download</a>
        			      </li>
        			</ul>		</div>
        	</nav>
        </div>
        <div class="nav-overlay d-none"></div>        
        <div class="subnav navbar navbar-default">
          <div class="container">
            <div class="hide-when-search" id="breadcrumb">
        	  <ul class="breadcrumb">
        		<li></li>
        	  </ul>
        	</div>
        
        	<div class="breadcrumpsearch">
        	  <form class="navbar-form navbar-right" role="search" id="search">
        		<div class="form-group">
        		  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
        		</div>
        	  </form>
        	</div>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list">Search Results for <span></span></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination" data-first="First" data-prev="Previous" data-next="Next" data-last="Last"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="doc-plugins-ui-features-selection">
<h1 id="features-selection-input">Features: Selection Input</h1>

<h2 id="enum-values">Enum Values</h2>
<h4 id="plain-enum-selection">Plain Enum Selection</h4>
<p>Defining a property with an Enum type is all that it takes to create a dropdown selection in the UI.</p>
<pre><code class="lang-csharp">[DisplayName(&quot;Plain Enum Selection&quot;)]
[Description(&quot;Defining a property with an Enum type is all that it takes to get a dropdown selection in the UI.&quot;)]
public VarEnum VarEnumValue { get; set; }
</code></pre>
<p><img src="../../../../images/ui_feat2_select_enum.png" alt="Ui Feat2 Select Enum"></p>
<h4 id="enum-with-description-attributes">Enum with Description Attributes</h4>
<p>When the enum members are decorated with <a class="xref" href="https://learn.microsoft.com/dotnet/api/system.componentmodel.descriptionattribute">DescriptionAttribute</a> attributes those are automatically evalutated to generate friendly display text for the select options.</p>
<pre><code class="lang-csharp">[DisplayName(&quot;Enum with Description Attributes&quot;)]
[Description(&quot;When the enum members are decorated with Description attributes those are automatically evalutated &quot;
                + &quot;to generate nice display text for the select options.&quot;)]
public VideoCodecTypes SimpleEnumSelect { get; set; }
</code></pre>
<p><img src="../../../../images/ui_feat2_select_enum_desc.png" alt="Ui Feat2 Select Enum Desc"></p>
<h4 id="nullable-enum-selection">Nullable Enum Selection</h4>
<p>A property declared as a Nullable Enum is handled equally, but the options list will include an additional empty item to allow selecting the 'null' value.</p>
<pre><code class="lang-csharp">[DisplayName(&quot;Nullable Enum&quot;)]
[Description(&quot;A property declared as a Nullable Enum is handled equally, but the options list will include an additional &quot;
                + &quot;empty item to allow selecting the 'null' value.&quot;)]
public VideoCodecTypes? SimpleEnumSelectNullable { get; set; }
</code></pre>
<p><img src="../../../../images/ui_feat2_select_enum_nullable.png" alt="Ui Feat2 Select Enum Nullable"></p>
<h4 id="enum-selection-with-value-restriction">Enum Selection with Value Restriction</h4>
<p>Adding an <a class="xref" href="../../../../reference/pluginapi/MediaBrowser.Model.Attributes.SelectItemsSourceAttribute.html">SelectItemsSourceAttribute</a> allows specifying a list of enum values to a subset of the actual enum members.</p>
<pre><code class="lang-csharp">public IList&lt;VideoCodecTypes&gt; RestrictedCodecList =&gt; new[] { VideoCodecTypes.h264, VideoCodecTypes.hevc, VideoCodecTypes.mpeg2video, VideoCodecTypes.vc1, VideoCodecTypes.vp9, VideoCodecTypes.av1 };

[DisplayName(&quot;Enum Selection with Value Restriction&quot;)]
[SelectItemsSource(nameof(RestrictedCodecList))]
public VideoCodecTypes RestrictedEnumSelect { get; set; }
</code></pre>
<p><img src="../../../../images/ui_feat2_select_enum_restricted.png" alt="Ui Feat2 Select Enum Restricted"></p>
<h2 id="custom-list-selection">Custom List Selection</h2>
<h4 id="single-selection-from-custom-list">Single-Selection from Custom List</h4>
<p>This demonstrates the use of a custom list which is part of the UI class. In this example, all Saturdays and Sundays are disabled and unavailable for selection.</p>
<h5 id="create-select-list">Create Select List</h5>
<p>The following method generates a list of <a class="xref" href="../../../../reference/pluginapi/Emby.Web.GenericEdit.Common.EditorSelectOption.html">EditorSelectOption</a> items.</p>
<pre><code class="lang-csharp">public CreateSelectList()
{
    var list = new List&lt;EditorSelectOption&gt;();
    var date = DateTime.Now.Date;

    for (int i = 0; i &lt; 30; i++)
    {
        list.Add(
            new EditorSelectOption
            {
                Value = date.ToString(&quot;O&quot;).Substring(0, 10),
                Name = date.ToString(&quot;D&quot;),
                ShortName = date.ToString(&quot;ddd, d&quot;),
                IsEnabled = date.DayOfWeek != DayOfWeek.Saturday &amp;&amp; date.DayOfWeek != DayOfWeek.Sunday,
                ToolTip = &quot;This is a tooltip: &quot; + date.ToLongDateString(),
                Color = date.DayOfWeek == DayOfWeek.Sunday ? &quot;red&quot; : null,
            });

        date = date.AddDays(1);
    }

    this.DatesList = list;
}
</code></pre>
<h5 id="properties">Properties</h5>
<p>With the <a class="xref" href="../../../../reference/pluginapi/MediaBrowser.Model.Attributes.SelectItemsSourceAttribute.html">SelectItemsSourceAttribute</a>, a list of <a class="xref" href="../../../../reference/pluginapi/Emby.Web.GenericEdit.Common.EditorSelectOption.html">EditorSelectOption</a> items can be used to provide list of custom elements for selection.</p>
<pre><code class="lang-csharp">[Browsable(false)]
public IEnumerable&lt;EditorSelectOption&gt; DatesList { get; set; }

[DisplayName(&quot;Select Day&quot;)]
[Description(&quot;With the SelectItemsSource attribute, a list of EditorSelectOption items can be used to provide list of arbitrary elements for selection.&quot;)]
[SelectItemsSource(nameof(DatesList))]
public string StaticValueSelect { get; set; }
</code></pre>
<p><img src="../../../../images/ui_feat2_select_customlist.png" alt="Ui Feat2 Select Customlist"></p>
<h4 id="multi-selection-from-custom-list">Multi-Selection from Custom List</h4>
<p>The <a class="xref" href="../../../../reference/pluginapi/MediaBrowser.Model.Attributes.EditMultilSelectAttribute.html">EditMultilSelectAttribute</a> turns a selection element into a a multi-select element.</p>
<pre><code class="lang-csharp">[DisplayName(&quot;Multi-Selection from Custom Source&quot;)]
[Description(&quot;This is the regular multi-select input.&quot;)]
[EditMultilSelect]
[SelectItemsSource(nameof(DatesList))]
public string MultiEnumSelect { get; set; }
</code></pre>
<p><img src="../../../../images/ui_feat2_select_custom_multi.png" alt="Ui Feat2 Select Custom Multi"></p>
<h4 id="multi-line-multi-selection-from-custom-list">Multi-Line Multi-Selection from Custom List</h4>
<p>This is a multi-select input showing multiple lines. Its primary use case is showing realtime status messages rather than for users making selections.<br>
The <a class="xref" href="../../../../reference/pluginapi/MediaBrowser.Model.Attributes.EditMultilSelectAttribute.html">EditMultilSelectAttribute</a> indicates selection of multiple items while the  qMediaBrowser.Model.Attributes.EditMultilineAttribute tells how many rows should be visible.</p>
<pre><code class="lang-csharp">[DisplayName(&quot;Multiline Multi-Selection from Custom Source&quot;)]
[Description(&quot;This is a multi-select input showing multiple lines. Its primary use case is showing realtime status messages &quot;
                + &quot;rather than for users making selections.&quot;)]
[EditMultiline(8)]
[EditMultilSelect]
[SelectItemsSource(nameof(DatesList))]
public string MultiEnumSelect2 { get; set; }
</code></pre>
</article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                </ul>
              </div>
              <div class="sdkversion Release">
                  SDK <span class="sdkVersionSpan"></span>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
                <h5>On this Page</h5>
                <div></div>
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to Top</a>
            </span>
            Copyright 2022 © EMBY LLC.  Please see our <a class="lnk" href="https://emby.media/terms.html">terms of use</a> and <a class="lnk" href="https://emby.media/privacy.html">privacy policy</a>.
            
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../../../../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../../../../searchIndex.js"></script>
    <script type="text/javascript" src="../../../../styles/lunr.min.js"></script>
    <script type="text/javascript" src="../../../../styles/docfx.js"></script>
    <script type="text/javascript" src="../../../../styles/main.js"></script>
  </body>
</html>
